<template>
  <div style="background: #fff; padding: 10px;">
    <!--  :isPage="false" 不加分页 -->
    <TableModule :tableModule="tableModule" ref="TableModuleRef">
      <template #event>
        <el-button type="primary" @click="onNew" v-show="globalEdit == 1">新增</el-button>
      </template>
      <template #tableColumn>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope" #default="scope">
            <el-button size="mini" type="text" @click="onView(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" type="text" @click="onEdit(scope.$index, scope.row)"
              v-show="globalEdit == 1">编辑</el-button>
            <el-button size="mini" type="text" @click="onDel(scope.$index, scope.row)"
              v-show="globalEdit == 1">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </TableModule>

    <el-dialog title="版本发布" v-model="pageData.dialogVisible" width="500">
      <div style="margin-top: 10px;">
        <el-form :model="pageData.fromData" label-width="auto">
          <el-form-item label="项目名称" :required="true">
            <ProjectVerCascader style="width: 100%;" :options="options" v-model="pageData.fromData.projectId" />
          </el-form-item>
          <el-form-item label="版本名称" :required="true">
            <el-input v-model="pageData.fromData.verName"></el-input>
          </el-form-item>
          <el-form-item label="版本描述" :required="true">
            <el-input v-model="pageData.fromData.verContent"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="pageData.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSave">确 定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { postRequest, getRequest, formatDate, globalEdit } from "@/utils/api"
import { getDicName, transformToTreeData, getVersionData } from "@/utils/dic"
import { useRouter } from 'vue-router';

const router = useRouter();

const options = transformToTreeData(getVersionData(), 2)

const pageData = reactive({
  dialogVisible: false,
  fromData: { projectId: '', verName: '', verStatus: '', verContent: '' }
})
const queryData = [
  { label: "项目名称", prop: 'projectId', type: 'cascader' },
  { label: "关键字", prop: 'keyWord', type: 'input', placeholder: '版本名称/主版本号/次版本号/版本描述' },
  // { label: "版本名称", prop: 'verName', type: 'selectdic', options: 'DIC_PROJECT'},
]
const columnsData = [
  { prop: 'projectId', type: 'dict', options: 'DIC_PROJECT', label: '项目名称', width: 140 },
  { prop: 'verName', label: '版本名称', width: 140 },
  { prop: 'firstVerNo', label: '主版本号', width: 120 },
  { prop: 'secondVerNo', label: '次版本号', width: 160 },
  { prop: 'verStatus', type: 'dict', options: 'VER_STATUS', label: '当前状态', width: 100 },
  { prop: 'releaseTime', type: 'time', label: '发布时间', width: 100 },
  { prop: 'verContent', label: '版本描述', min_width: 200 },
]

const TableModuleRef = ref()
const tableModule = ref({
  api: '/version/web/ht/verinfo/list',// 请求api
  hadCheckbox: false,// 选择列
  hadIndex: true,// 序号列
  hadPage: false, // 分页
  hadSearch: false, // 查询条件
  columns: columnsData,// 表格配置
  query: queryData,// 查询条件配置
})

onMounted(() => { })

const onNew = () => {
  pageData.dialogVisible = true
  pageData.fromData.projectId = ''
  pageData.fromData.verName = ''
  pageData.fromData.verContent = ''
}

const onEdit = (index, row) => {
  router.push("/verDetail?opType=1&verId=" + row.verId)
}

const onView = (index, row) => {
  router.push("/verDetail?opType=3&verId=" + row.verId);
}

const onDel = (index, row) => {
  let url = '/version/web/ht/verinfo/delete/' + row.verId
  ElMessageBox.confirm(
    '此操作将永久删除该记录, 是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      ElMessageBox.confirm(
        '此操作将永久删除该记录, 再次确认是否继续?',
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '二次确认删除',
          type: 'warning',
        })
        .then(() => {
          getRequest(url, {})
            .then(resp => {
              if (resp.data.code == 0) {
                ElMessage.success('删除成功')
                TableModuleRef.value.queryList()
              } else {
                ElMessage.error(resp.data.message)
              }
            })
            .catch(e => {
              ElMessage.error(e)
            })
        })
        .catch(() => {
          ElMessage({ message: '已取消删除!', type: 'info' })
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除!', type: 'info' })
    })
}

const onSave = () => {
  if (!pageData.fromData.projectId) {
    ElMessage.error('项目名称，不能为空!')
    return
  }
  if (pageData.fromData.projectId.length != 5) {
    ElMessage.error('请选择项目!')
    return
  }
  if (!pageData.fromData.verName) {
    ElMessage.error('版本名称，不能为空!')
    return
  }
  if (!pageData.fromData.verContent) {
    ElMessage.error('版本描述，不能为空!')
    return
  }
  postRequest('/version/web/ht/verinfo/save', pageData.fromData)
    .then(resp => {
      if (resp.data.code == 0) {
        pageData.dialogVisible = false
        ElMessage.success('保存成功')
        TableModuleRef.value.queryList()
      } else {
        ElMessage.error(resp.data.message)
      }
    })
    .catch(e => {
      ElMessage.error(e)
    })
}

</script>
